<template>
	<section class="look-history">
		<ul class="look-history-contain" 
			v-infinite-scroll="loadData" 
			infinite-scroll-disabled="loading" 
			infinite-scroll-distance="10"
			v-if="flag"
		>
			<li  v-for="(item, index) in history_list" :key="index">
				<div class="pt30rem pl30rem pb30rem fs26rem c666">
					{{item.time}}
				</div>
				<div class="pt30rem pl30rem pr30rem layout pb30rem border-b bg-white" v-for=" (i,index2) in item.content" :key="index2" @click="jumpDetail(i)" style="position:relative"> 
					<div style="position:relative" v-if="i.status == 6">
				 		<img class="goods-img" :src="img_url+i.pic" >
						<p class="fs30rem circle pl10rem pr10rem pt5rem pb5rem white" style="position:absolute;left:0; top:0; background-color:#F8474E;opacity:.8;">拼</p>
			 		</div>
			 		<img class="goods-img" :src="img_url+i.pic" v-else>
					<div class="goods-info flex_1 ml20rem">
						<h2 class="look-goods-name fs28rem bold c333">
							{{i.goods_name}}
						</h2>
						<div class="layout">
							<span class="fs34rem cxo-red-color">
								￥ {{i.price}} 
							</span>
							<i 
								@click="deleteHistory(i.goods_id , index, index2)"
								class="fs24 iconfont icon-shanchu"
							></i>
						</div>
					</div>
					<img  style="position:absolute;bottom:50%;right:5%;transform: translate(-50%,50%); width:5rem;height:5rem" src="../../../assets/img10.png" alt="" v-if="i.status == 7">
				</div>
			</li>			
		</ul>
	</section>
</template>

<script>
	import { getViewHistory, delViewHistory } from "@/api/goods";
	import { InfiniteScroll } from 'mint-ui';
	import Default from "@/components/Default";
	import $toast from '@/utils/toast';	
	import Modal  from '@/utils/modal';

	export default
	{
		components: 
		{
			Default
		},
		directives:
		{
			InfiniteScroll
		},
		data()
		{
			return{
				page_index   : 1,
				history_list : [],
				loading      : false,
				img_url      : process.env.IMG_URL,
				img          : require('../../../assets/icon-goods2.png'),
				flag         : true,
				item         : 10,
				page_index   : 1,
				uid          : localStorage.getItem('uid'),
			}
		},
		mounted()
		{
			window.addEventListener('scroll', this.handleScroll);
		},
		methods:
		{
			loadData()
			{
				this.loading = true;
				var params = {
					uid        : this.uid,
					page_index : this.page_index++,
					item       : this.item
				}
				getViewHistory(params).then(res => {
					if(res.data.length > 0 )
					{
						this.history_list = this.history_list.concat(res.data);
						this.loading = false;
					}					
					else if (params.page > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.item)
					{
						this.loading = true;
					}
				})
			},
			deleteHistory(id, i, i2)
			{
				Modal.confirm("确定删除记录吗？","提示").then( res => {
					delViewHistory(this.uid, id).then( res => {
						this.history_list[i].content.splice(i2, 1);
						$toast('删除成功');

					});
				});
			},
			handleScroll ()	 
			{
			  this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			},
			jumpDetail(item)
			{
				switch(item.status)
				{
					case 1:
						this.$router.push('/detail/experience-detail/' + item.goods_id + '?status=2')
						return new Promise(()=>{})
					case 2:
						this.$router.push('/ordering/detail/commodity-detail/' + item.goods_id)
					case 3:
						this.$router.push('/mall/mall-detail/' + item.goods_id);
						return new Promise(()=>{})
					case 6:
						this.$router.push('/ordering/detail/group-detail/' + item.goods_id);
						return new Promise(()=>{})

				}
			}
		},
		created()
		{
			window.scrollTo(0,0);
			this.loadData();
		}
	}                                                                                                                 
</script>
<style lang="less">
.look-history{
	.look-history-contain{
		min-height: 1334/28rem;
		background-color: #f1f1f1;
		.goods-img{
			width: 120/28rem;
			height: 120/28rem;
		}
		.goods-info{
			width: 540/28rem;
			height: 125/28rem; 
			.look-goods-name{
				display: block;
				height: 80/28rem;
				overflow-y: hidden;
			}
		}
	}
}
	
</style>

